<template>
  <div>
   <div class="head">
      <div class="head_infor">
        <img :src="imgUrl" class="head_infor_logo">
        <div class="head_infor_linktimeweather">
          <div class="head_infor_linktimeweather_link head_infor_linktimeweather_activelink">数据分析</div>
          <div class="head_infor_linktimeweather_time">
            <div class="head_infor_linktimeweather_timehour">{{hour}} {{swxw}}</div>
            <div class="head_infor_linktimeweather_timeyear">{{time}}</div>
          </div>
          <div class="head_infor_linktimeweather_weather">
            <iframe class="iframe" scrolling="no" frameborder="0" src="http://i.tianqi.com/index.php?c=code&id=12&color=%23FFFFFF&icon=1&num=3&site=14"></iframe>
          </div>
        </div>
      </div>
      <div class="head_tab">
        <div v-for="(tab,index) in tabs" class='head_tab_tit' @click="toggle(index,tab.view)" :class="{active:active==index}">{{tab.type}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    name: "publichead",
    data(){
      return {
        imgUrl:'./img/header-title.png',
        time:'',
        timer:'',
        hour:'',
        active:0,
        swxw:'',
        tabs:[
          {
            type:'街道与路线关系图',
            view:'EchartsOne'
          },
          {
            type:'路段技术等级及路面类型对应里程图表',
            view:'EchartsTwo'
          },
          {
            type:'建造年份对应路段数统计表',
            view:'EchartsThree'
          },
          {
            type:'行政区域绿化长度统计图',
            view:'EchartsFour'
          },
          {
            type:'行政区域级别路段统计图',
            view:'EchartsFive'
          }
          ,
          {
            type:'行政区域与社区关系图',
            view:'EchartsSix'
          }
        ]
      }
    },
    mounted(){
      this.timer=setInterval(()=>{
       this.yearmonthdate();
      },1000);
    },
    methods:{
      yearmonthdate(){
        let date=new Date();
        let year=date.getFullYear();
        let month=date.getMonth()+1;
        let dates=date.getDate();
        let hours=date.getHours();
        let minute=date.getMinutes();
        let second=date.getSeconds();
        this.time=year+"-"+(month<10?("0"+month):month)+"-"+(dates<10?("0"+dates):dates);
        this.hour=(hours<10?("0"+hours):hours)+":"+(minute<10?("0"+minute):minute)+":"+(second<10?("0"+second):second)
        if(hours<12){
          this.swxw="AM"
        }else{
          this.swxw="PM"
        }
      },
      toggle(i,v){
        this.active=i;
        this.$emit('achivecurrent',v);
      }
    },
    destroyed(){
      if(this.timer){
        clearInterval(this.timer)
      }
    }
  }
</script>
